{% extends 'base.html' %}
{% load staticfiles %}
{% load music_tags %}
{% block aside %}
      <section class="vbox">
        <section class="w-f-md" id="bjax-target">
          <section class="hbox stretch">
            <!-- side content -->
            <aside class="aside bg-light dk" id="sidebar">
              <section class="vbox animated fadeInUp">
                <section class="scrollable hover">
                    {% get_music_categories as music_category_list %}
                  <div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                      <a href="{% url 'music:music' %}" class="list-group-item active">
                        全部分类
                      </a>
                      {% for music_category in music_category_list %}
                        <a href="{% url 'music:music_category' music_category.pk %}" class="list-group-item">
                          {{ music_category.name }}
                        </a>
                      {% endfor %}
                  </div>
                </section>
              </section>
            </aside>
            <!-- / side content -->
            <section>
              <section class="vbox">
                <section class="scrollable padder-lg">
                  <h2 class="font-thin m-b">全部分类
                    <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                        <span class="bar1 a1 bg-primary lter"></span>
                        <span class="bar2 a2 bg-info lt"></span>
                        <span class="bar3 a3 bg-success"></span>
                        <span class="bar4 a4 bg-warning dk"></span>
                        <span class="bar5 a5 bg-danger dker"></span>
                    </span>
                    {% if user.is_authenticated %}
                        <button type="button" onclick="jump('{% url 'music:music_upload' %}')" class="btn btn-primary" style="margin-left: 1%">上传音乐</button>
                    {% else %}
                        <button type="button" onclick="toast_warning()" class="btn btn-primary" style="margin-left: 1%">上传音乐</button>
                    {% endif %}
                  </h2>
                  <div class="row row-sm" style="height: 80%">
                  {% for music in music_list %}
                      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                        <div class="item">
                            <div class="pos-rlt" >
                                <div class="item-overlay opacity r r-2x bg-black">
                                    <div class="center text-center m-t-n">
                                        <a href="javascript:void(0)" onclick="isplay(event)" videoid="{{ music.id }}">
                                            <i class="fa icon-control-play i-2x music-icon"></i>
                                        </a>
                                    </div>
                                    <div class="bottom padder m-b-sm">
                                    {% if user.is_authenticated %}
                                      <a href="javascript:void(0)" onclick="add_favorite_music('{{ music.id }}')" mid="{{ music.id }}" class="pull-right">
                                        <i class="fa fa-heart-o"></i>
                                      </a>
                                      {% if perms.music.download and music.is_download == 0 %}
                                        <a href="{{ music.music_src.url }}" download="{{ music.name }}">
                                            <i class="icon-cloud-download"></i>
                                        </a>
                                      {% elif perms.music.download and music.is_download == 1 %}
                                          <a href="javascript:void(0)" onclick="show_toast('warning','该音乐暂时不允许下载', '{{ user.avatar.url }}')">
                                            <i class="icon-cloud-download"></i>
                                          </a>
                                      {% elif not perms.music.download %}
                                          <a href="javascript:void(0)" onclick="show_toast('warning','您需要实名认证之后才能下载', '{{ user.avatar.url }}')">
                                            <i class="icon-cloud-download"></i>
                                          </a>
                                      {% endif %}
                                    {% else %}
                                        <a href="javascript:void(0)" onclick="toast_warning()" class="pull-right">
                                            <i class="fa fa-heart-o"></i>
                                        </a>
                                        <a href="javascript:void(0)" onclick="toast_warning()"><i class="icon-cloud-download"></i></a>
                                    {% endif %}
                                    </div>
                                </div>
                                <img src="{{ music.music_cover.url }}" alt="" class="r r-2x img-full">
                                <div style="height: 1px;width: 1px;overflow: hidden;">
                                    <audio controls="controls" class="nn">
                                        <source src="{{ music.music_src.url }}" type="audio/mp3" />
                                    </audio>
                                </div>
                            </div>
                            <div class="padder-v">
                                <a href="{{ music.get_absolute_url }}" class="text-ellipsis">{{ music.name }}</a>
                                {% if user.is_authenticated %}
                                    <a href="{% url 'user:show_another' music.user_id %}" class="text-ellipsis text-xs text-muted">{{ music.user.username }}</a>
                                {% else %}
                                    <a href="javascript:void(0)" onclick="toast_warning()" class="text-ellipsis text-xs text-muted">{{ music.user.username }}</a>
                                {% endif %}
                            </div>
                        </div>
                      </div>
                  {% empty %}
                    <h2 style="text-align: center">这个板块还没有人来过哦</h2>
                  {% endfor %}
                  </div>
                  <ul class="pagination pagination">
                  {% if is_paginated %}
                    <li><a><i class="fa fa-chevron-left"></i></a></li>
                      {% if first %}
                        <li class="active"><a href="#">1</a></li>
                      {% endif %}
                      {% if left %}
                        {% if left_has_more %}
                            <span>...</span>
                        {% endif %}
                        {% for i in left %}
                            <li><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                    {% endif %}
                      <li><a href="?page={{ page_obj.number }}" style="color: hotpink">{{ page_obj.number }}</a></li>
                    {% if right %}
                        {% for i in right %}
                            <li><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                        {% if right_has_more %}
                            <span>...</span>
                        {% endif %}
                    {% endif %}
                    {% if last %}
                        <li><a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
                    {% endif %}
                    <li><a><i class="fa fa-chevron-right"></i></a></li>
                  {% endif %}
                  </ul>
                </section>
              </section>
            </section>
          </section>
        </section>
      <script type="text/javascript">
         function add_favorite_music(music_id){
            $.get("{% url 'favorite:add_favorite_music' %}",{
                'music_id': music_id,
                'user_id': '{{ user.id }}',
            },
             function(data) {
                var ele = $("a[mid="+data.id+"]");
                if (data.status === 'ok') {
                    ele.addClass("active");
                    ele.children().removeClass("fa-heart-o text");
                    ele.children().addClass("fa-heart text-active text-danger");
                    show_toast('success', data.msg, '{{ user.avatar.url }}')
                }
                else {
                    show_toast('warning', data.msg, '{{ user.avatar.url }}')
                }
            });
        }
      </script>
      <script type="text/javascript">
        var mp3_list = [];
        {% for music in music_list %}
            var author = '{{ music.user.nickname }}';
            var url = '{{ music.music_src.url }}';
            var name = '{{ music.name }}';
            var video_id = '{{ music.id }}';

            var mp3 = {'author': author, 'url': url, 'name': name, 'videoid': video_id};
            mp3_list.push(mp3);
        {% endfor %}
      localStorage.setItem("mp3list", JSON.stringify(mp3_list));
    </script>
{% endblock aside %}